[EuiSuperDatePicker] Time zone display #9191

acstll · 2025-11-06T15:17:01Z

Summary

Important

This PR merges into a feature branch

This adds time zone information to the date picker popovers in the EuiSuperDatePicker. Passing the name of the time zone is required. The space where the time zone information is shown can be customized with a render function prop.

Resolves https://github.com/elastic/eui-private/issues/440 🔒

Why are we making this change?

As part of a series of improvements to EuiSuperDatePicker that should have a positive immediate impact for users.

Screenshots

Figma

Impact to users

🟢 No impact. Setting the timeZoneDisplay prop is needed in order for the info to show. No logic in the component is affected.

QA

📘 I'm open to feedback regarding:

the prop names
whether the render function (timeZoneCustomDisplayRender) is the best approach for the custom content
- the requirement, as in the acceptance criteria is: "Optionally add an icon button that links to the settings page where the time zone can be changed"
anything else is needed for accessibility — I considered nothing specific was needed

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - ~~(emulate forced colors if you do not have access to a Windows machine.)~~
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
- ~~If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

elasticmachine · 2025-11-07T15:28:12Z

💚 Build Succeeded

History

💚 Build #1857 succeeded 651d787
💚 Build #1854 succeeded 1028a20
💚 Build #1849 succeeded f51c969
💚 Build #1848 succeeded 0237cd1

cc @acstll

elasticmachine · 2025-11-07T15:40:41Z

💚 Build Succeeded

Buildkite Build
Commit: dcce4f0

History

💚 Build #5157 succeeded 1028a20
💚 Build #5153 succeeded f51c969
💔 Build #5152 failed 0237cd1

cc @acstll

mgadewoll · 2025-11-11T08:14:20Z

packages/eui/src/components/date_picker/super_date_picker/date_popover/timezone_display.tsx

+   * @example "America/Los_Angeles"
+   * @link https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
+   */
+  timeZoneDisplay?: string;


Since this is a simple string, the naming display doesn't quite fit, imho.
The component already is called EuiTimeZoneDisplay, how about just naming it timeZone?

And drilled props could then be timeZone and timeZoneCustomRender.

I don't mind about drilled props that much, having them named the same has to do also with "types saving" (if that makes sense 😁)

the display part was intentional, to make it clear it's something informational and it's not going to affect the component behavior; my concern is that consumers may be confused thinking or assuming setting timeZone would actually set the time zone for the dates being handled in the component; similarly to the odd utcOffset which doesn't do what you'd expect — do you think that's a valid concern? 🤔

mgadewoll · 2025-11-11T08:16:01Z

packages/eui/src/components/date_picker/super_date_picker/date_popover/timezone_display.tsx

+   * Useful for
+   * @returns
+   */
+  timeZoneCustomDisplayRender?: (


I'd think we could make this shorter too. The component is scoped only to display the time zone. The name seems unnecessarily long as there is no need to distinguish it from something else in the component. Maybe we could call it customRender ?

💭 That being said, maybe we could use children for the custom content? We can still pass along props like children({ nameDisplay }).

I like having a render prop be just that, and I'm not a fan of children as function, but we have that pattern already in other components, and it makes sense here — I will use children 👍

mgadewoll · 2025-11-11T08:21:53Z

packages/eui/src/components/date_picker/super_date_picker/time_window_buttons.tsx

  isDisabled?: boolean;
 };

+// TODO rename to add eui prefix e.g. EuiTimeWindowButtons


Is this still needed?

yep, it's not relevant because it's a todo for another PR haha, I think I will keep it and remove it after I do the rename…

mgadewoll · 2025-11-11T08:23:57Z

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx

+    timeZoneCustomDisplayRender: ({ nameDisplay }) => (
+      <>
+        {nameDisplay}
+        <EuiButtonIcon


Nit: We should add an aria-label to showcase correct accessible usage.

mgadewoll · 2025-11-11T08:28:11Z

packages/eui/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx

          </p>
        </EuiScreenReaderOnly>
      </EuiForm>
+      <EuiTimeZoneDisplay


💭 One concern I have here in terms of Accessibility:
The time zone is added as regular content. It's not otherwise linked to the date at all. Most other content in the popover are interactive elements that force focus mode while the time zone is only perceivable via browse mode (not focusable). That could lead to it not being noticed potentially.

I'm wondering if we should provide the time zone information as additional information on the date input as well to provide full context.

// example: NVDA // without linking the time zone edit read only Nov 11, 2025 @ 09:27:16.792 // with linking the time zone via `aria-describedby` edit read only UTC-8 (America/Los_Angeles) selected Nov 11, 2025 @ 09:25:01.562

// example: JAWS // without linking the time zone read only edit Nov 11, 2025 @ 09:28:41.779 // with linking the time zone via `aria-describedby` read only edit Nov 11, 2025 @ 09:29:08.598 UTC-8 (America/Los_Angeles)

ℹ️ If the EuiFieldText is wrapped in EuiFormRow the linking has to happen via describedByIds on EuiFormRow.

I thought about this but discard the idea, seeing the actual output makes me think it's worth doing it

question: do you think it'd be better to remove the "name" part? (I guess that's easy to do while keeping the visible text the same) the offset is what's important…

-edit read only UTC-8 (America/Los_Angeles) selected Nov 11, 2025 @ 09:25:01.562 +edit read only UTC-8 selected Nov 11, 2025 @ 09:25:01.562

mgadewoll · 2025-11-11T08:29:15Z

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx

  render: (args) => <StatefulSuperDatePicker {...args} />,
 };

+export const CustomTimeZoneDisplay: Story = {


Maybe we should add a story for the regular time zone as well? 🤔 (or enable it in an existing story at least to showcase it)

I'll do one of the two, that makes sense 👍

mgadewoll · 2025-11-11T08:34:09Z

packages/eui/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx

  roundUp,
  labelPrefix,
+  timeZoneDisplay,
+  timeZoneCustomDisplayRender,


[Unrelated to the marked line]:

I noticed that the prepend on the EuiFieldText is not linked to the input (code), meaning the input has no label (the same applies in other tabs).

We don't have to fix it here if you prefer keeping it scoped, but maybe you could add it at some point where it fits in while working on EuiSuperDatePicker?

nice catch, if I don't do it here, I'll make sure to do it while working on EuiSuperDatePicker as you suggest

mgadewoll · 2025-11-11T08:47:16Z

packages/website/docs/components/forms/date-and-time/super-date-picker.mdx

+  };
+
+  const customButton = (
+    <EuiButtonIcon


Let's add aria-label also here to provide a meaningful label.

acstll added 2 commits November 6, 2025 15:59

[EuiTimeZoneDisplay] New component

ae6cdbb

[EuiSuperDatePicker] Integrate time zone display

0237cd1

acstll self-assigned this Nov 6, 2025

acstll added 11 commits November 6, 2025 17:07

[EuiTimeZoneDisplay] locale not actually needed

acbd81d

[EuiTimeZoneDisplay] Add story

9bf0081

[TimeWindowButtons] Try fixing flaky test

34a77ea

Lint, remove smoke testing leftover

f51c969

[EuiTimeZoneDisplay] Rename hook and add eui prefix

91c3751

TODO comment

7748688

[EuiTimeZoneDisplay] Add unit tests

216f083

Update VRT

f0a2a79

[Docs] Time zone display

954232f

Lint

58d8029

Changelog

1028a20

acstll marked this pull request as ready for review November 7, 2025 12:26

acstll requested a review from a team as a code owner November 7, 2025 12:26

acstll added 2 commits November 7, 2025 15:45

[TimeWindowButtons] Try fixing flaky test 2

651d787

[TimeWindowButtons] Try fixing flaky test 3

dcce4f0

mgadewoll self-requested a review November 10, 2025 09:31

mgadewoll reviewed Nov 11, 2025

View reviewed changes

[EuiSuperDatePicker] Time zone display #9191

Are you sure you want to change the base?

[EuiSuperDatePicker] Time zone display #9191

Conversation

acstll commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots

Figma

Impact to users

QA

General checklist

Uh oh!

elasticmachine commented Nov 7, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 7, 2025

💚 Build Succeeded

History

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mgadewoll Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

acstll commented Nov 6, 2025 •

edited

Loading

mgadewoll Nov 11, 2025 •

edited

Loading